<template>
  <div class="app-container paper-home">
    <el-row :gutter="20">
      <!-- 个人信息卡片 -->
      <el-col :span="24">
        <el-card class="paper-info-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-user-solid"></i> 个人信息</span>
          </div>
          <div class="info-content">
            <div class="info-item">
              <span class="label">姓名：</span>
              <span class="value">林涛</span>
            </div>
            <div class="info-item">
              <span class="label">学院：</span>
              <span class="value">工程技术学院</span>
            </div>
            <div class="info-item">
              <span class="label">专业：</span>
              <span class="value">计算机科学与技术</span>
            </div>
            <div class="info-item">
              <span class="label">年级：</span>
              <span class="value">2021级</span>
            </div>
            <div class="info-item">
              <span class="label">学号：</span>
              <span class="value">2021010101</span>
            </div>
            <div class="info-item">
              <span class="label">导师：</span>
              <span class="value">张教授</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 毕业论文基本信息 -->
      <el-col :span="24" style="margin-top: 20px;">
        <el-card class="paper-info-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-document"></i> 毕业论文基本信息</span>
          </div>
          <div class="info-content">
            <div class="info-item">
              <span class="label">论文题目：</span>
              <span class="value">基于人工智能的智能推荐系统设计与实现</span>
            </div>
            <div class="info-item">
              <span class="label">研究方向：</span>
              <span class="value">人工智能、机器学习、推荐系统</span>
            </div>
            <div class="info-item">
              <span class="label">论文类型：</span>
              <span class="value">软件工程类</span>
            </div>
            <div class="info-item">
              <span class="label">完成日期：</span>
              <span class="value">2025年5月</span>
            </div>
            <div class="info-item">
              <span class="label">论文摘要：</span>
              <p class="abstract">
                本研究旨在设计并实现一个基于人工智能技术的智能推荐系统。该系统结合了协同过滤、内容推荐和深度学习等多种推荐算法，
                能够根据用户的历史行为和偏好，为用户提供个性化的内容推荐服务。通过大量的实验验证，
                该系统在推荐准确率、召回率等关键指标上表现优异，相比传统推荐方法有显著提升。
                此外，系统还具备良好的可扩展性和实时性，能够应用于电子商务、在线视频、新闻推荐等多种场景。
              </p>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 论文研究成果 -->
      <el-col :span="24" style="margin-top: 20px;">
        <el-card class="paper-info-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-trophy"></i> 论文研究成果</span>
          </div>
          <div class="info-content">
            <div class="achievement-item">
              <h4>研究成果列表</h4>
              <el-timeline>
                <el-timeline-item timestamp="2024年12月" placement="top">
                  <el-card>
                    <h5>发表学术论文</h5>
                    <p>在《计算机科学与应用》期刊上发表题为《基于深度学习的个性化推荐算法研究》的学术论文一篇。</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2024年10月" placement="top">
                  <el-card>
                    <h5>获得软件著作权</h5>
                    <p>获得"智能推荐系统V1.0"软件著作权一项。</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2024年8月" placement="top">
                  <el-card>
                    <h5>参与科研项目</h5>
                    <p>参与导师主持的省级科研项目"大数据环境下的智能推荐关键技术研究"。</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2024年6月" placement="top">
                  <el-card>
                    <h5>获得学术竞赛奖项</h5>
                    <p>在"全国大学生人工智能创新大赛"中获得二等奖。</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>

            <div class="achievement-item">
              <h4>技术创新点</h4>
              <el-tag type="success" effect="dark" class="innovation-tag">多模态融合推荐算法</el-tag>
              <el-tag type="success" effect="dark" class="innovation-tag">实时推荐引擎</el-tag>
              <el-tag type="success" effect="dark" class="innovation-tag">隐私保护推荐机制</el-tag>
              <el-tag type="success" effect="dark" class="innovation-tag">可解释性推荐系统</el-tag>
              <el-tag type="success" effect="dark" class="innovation-tag">自适应学习框架</el-tag>
            </div>

            <div class="achievement-item">
              <h4>系统演示</h4>
              <el-button type="primary" icon="el-icon-video-camera" @click="showDemo">查看系统演示</el-button>
              <el-button type="info" icon="el-icon-document" @click="showPaper">查看论文全文</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'PaperHome',
  data() {
    return {
      // 组件数据
    }
  },
  mounted() {
    // 组件挂载后的初始化逻辑
  },
  methods: {
    showDemo() {
      this.$message.info('系统演示功能待实现')
    },
    showPaper() {
      this.$message.info('论文全文查看功能待实现')
    }
  }
}
</script>

<style scoped>
.paper-home {
  padding: 20px;
}

.paper-info-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.info-content {
  padding: 10px 0;
}

.info-item {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
}

.label {
  font-weight: bold;
  color: #606266;
  min-width: 100px;
}

.value {
  color: #303133;
  flex: 1;
}

.abstract {
  color: #303133;
  flex: 1;
  margin: 0;
  line-height: 1.8;
  text-indent: 2em;
}

.achievement-item {
  margin-bottom: 20px;
}

.achievement-item h4 {
  color: #606266;
  margin-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.innovation-tag {
  margin: 5px;
}

.el-timeline {
  padding-left: 20px;
}

.el-timeline-item__timestamp {
  color: #909399;
}

.el-card__body h5 {
  color: #303133;
  margin-bottom: 10px;
}

.el-card__body p {
  color: #606266;
  line-height: 1.6;
}
</style>